<template>
  <el-dialog title="新增跟进记录"
             :visible="dialogVisible"
             custom-class="trace-centen-dailog"
             append-to-body
             :close-on-click-modal="false"
             @open="onOpenCallback"
             @close="onClose">
    <el-form :model="traceInfo"
             size="small"
             label-width="85px"
             ref="trace"
             :rules="rules">
      <el-form-item label="跟进人员"
                    prop="trackPepole">
        <el-input v-model="traceInfo.trackPepole"></el-input>
      </el-form-item>
      <el-form-item label="跟踪时间"
                    prop="tm">
        <el-date-picker v-model="traceInfo.tm"
                        popper-class="date-picker"
                        type="datetime">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="跟踪内容"
                    prop="content">
        <el-input type="textarea"
                  :rows="4"
                  v-model="traceInfo.content"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button type="info"
                 size="mini"
                 @click="onClose">取 消</el-button>
      <el-button type="primary"
                 size="mini"
                 @click="onChange">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { addMRecord } from '@/api/maintenance'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    maturity: {
      type: String
    },
    advancingState: {
      type: String
    },
    contractId: {
      type: String
    }
  },
  data() {
    return {
      setting: {
        loadding: false
      },
      traceInfo: {
        content: '',
        tm: null,
        contractId: '',
        type: 1,
        trackPepole: '',
        projectMaturity: '',
        advancingState: ''
      },
      rules: {
        content: [
          { required: true, message: '请输入跟进内容!', trigger: 'blur' }
        ],
        tm: [
          { required: true, message: '请输入跟进时间!', trigger: 'blur' }
        ],
        trackPepole: [
          { required: true, message: '请输入跟进人员!', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    onOpenCallback() {
      this.traceInfo.trackPepole = this.userInfo.name
      this.traceInfo.contractId = this.contractId
      this.traceInfo.projectMaturity = this.maturity
      this.traceInfo.advancingState = this.advancingState
      this.traceInfo.tm = new Date()
    },
    onClose() {
      this.$refs.trace.resetFields()
      this.$emit('close')
    },
    onChange() {
      this.$refs.trace.validate(valid => {
        if (valid) {
          this.addRecord()
        }
      }
      )
    },
    // 新增跟进记录
    addRecord() {
      addMRecord(this.traceInfo).then(res => {
        if (res.data.success) {
          const result = res.data.data
          if (result) {
            this.$message({
              message: '新增跟进记录成功!',
              type: 'success',
              duration: 5 * 1000
            })
            this.onClose()
          } else {
            this.$message({
              message: result.Message,
              type: 'error',
              duration: 5 * 1000
            })
          }
        }
      })
    }
  }
}
</script>
